<script setup>
	import {
		reactive,
		watch
	} from 'vue'
	import {
		useStore
	} from "@/stores/index"
	import chatsApi from '@/api/chatsApi'


	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['update:modelValue'])
	const userStore = useStore()

	const data = reactive({
		userinfo: userStore.user.userInfo,
		chatCount: {},
		totalCount: 0
	})

	watch(
		() => props.modelValue,
		async (val) => {

			// console.log(data.userinfo);

			if (val) {
				const res = await chatsApi.chatCount();
				data.chatCount = res.data;


				// if (data.chatCount.days1) {
				// 	data.totalCount = data.totalCount + data.chatCount.days1.count_num
				// }
				// if (data.chatCount.days2) {
				// 	data.totalCount = data.totalCount + data.chatCount.days2.count_num
				// }
				// if (data.chatCount.days3) {
				// 	data.totalCount = data.totalCount + data.chatCount.days3.count_num
				// }
				// if (data.chatCount.days4) {
				// 	data.totalCount = data.totalCount + data.chatCount.days4.count_num
				// }
				// if (data.chatCount.days5) {
				// 	data.totalCount = data.totalCount + data.chatCount.days5.count_num
				// }
				// if (data.chatCount.days6) {
				// 	data.totalCount = data.totalCount + data.chatCount.days6.count_num
				// }
				// if (data.chatCount.days7) {
				// 	data.totalCount = data.totalCount + data.chatCount.days7.count_num
				// }

			}
		}, {
			immediate: true
		}
	)

	function onClick() {
		emit('update:modelValue', false)
	}

	const getSex = () => {
		let selSex = +data.userinfo.sex | 0

		if (selSex == 2) {
			return "女士";
		} else if (selSex == 1) {
			return "先生";
		} else {
			return "";
		}

		// switch (sex) {
		// 	case 0:
		// 	default:
		// 		return "";
		// 	case 1:
		// 		return "先生";
		// 	case 2:
		// 		return "女士";
		// }
	}

	const onExit = () => {

		uni.showModal({
			// 询问用户是否退出登录
			title: '退出登录',
			content: '您确定要退出登录吗?',
			success: res => {
				if (res.confirm) {
					//确定退出拿到token并清除token
					// let TOKEN = uni.getStorageSync('token');
					// uni.clearStorageSync();
					uni.removeStorageSync('token');
					uni.removeStorageSync('user');

					//清空用户信息
					userStore.user.clear();

					//退出成功！并跳转到其他页面
					uni.showToast({
						title: '退出成功',
						icon: 'none',
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index',
						});
					}, 1500);
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			},
		});
	}
</script>

<template>
	<view style="display: flex;justify-content:space-between;align-items: center;">
		<text class="title">{{data.userinfo.realname}}{{getSex()}}你好\n 目前你的定制计划已进行到第{{data.userinfo.days}}天</text>
		<text class="title exit" @click="onExit">安全退出</text>
	</view>

	<!-- 统计数据 -->
	<scroll-view scroll-y class="main">
		<text class="day"> 1Day</text>
		<view class="interact" space v-if="data.chatCount.days1">
			<!-- <view class="">
				公开交互：第{{data.chatCount.days1.public_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days1.public_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days1.public_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days1.public_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days1.public_num.picture_num}}次图片交互
			</view> -->
			<view class="">
				私人交互：{{data.chatCount.days1.private_num.voice_num}}次语音交互&nbsp;
				{{data.chatCount.days1.private_num.video_num}}次视频交互&nbsp;
				{{data.chatCount.days1.private_num.text_num}}次文字交互&nbsp;
				{{data.chatCount.days1.private_num.group_num}}次资料交互&nbsp;
				{{data.chatCount.days1.private_num.picture_num}}次图片交互
			</view>
			<!-- 	<view class="">
				分组交互：第{{data.chatCount.days1.group_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days1.group_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days1.group_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days1.group_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days1.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days1.now_count}}次
		</view>
		<text class="day"> 2Day</text>
		<view class="interact" space v-if="data.chatCount.days2">
			<!-- <view>
				公开交互：第{{data.chatCount.days2.public_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days2.public_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days2.public_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days2.public_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days2.public_num.picture_num}}次图片交互
			</view> -->
			<view>
				私人交互：{{data.chatCount.days2.private_num.voice_num}}次语音交互&nbsp;
				{{data.chatCount.days2.private_num.video_num}}次视频交互&nbsp;
				{{data.chatCount.days2.private_num.text_num}}次文字交互&nbsp;
				{{data.chatCount.days2.private_num.group_num}}次资料交互&nbsp;
				{{data.chatCount.days2.private_num.picture_num}}次图片交互
			</view>
			<!-- <view>
				分组交互：第{{data.chatCount.days2.group_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days2.group_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days2.group_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days2.group_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days2.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days2.now_count}}次
		</view>

		<text class="day"> 3Day</text>
		<view class="interact" space v-if="data.chatCount.days3">
			<!-- <view>
				公开交互：第{{data.chatCount.days3.public_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days3.public_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days3.public_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days3.public_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days3.public_num.picture_num}}次图片交互
			</view> -->
			<view>
				私人交互：{{data.chatCount.days3.private_num.voice_num}}次语音交互&nbsp;
				{{data.chatCount.days3.private_num.video_num}}次视频交互&nbsp;
				{{data.chatCount.days3.private_num.text_num}}次文字交互&nbsp;
				{{data.chatCount.days3.private_num.group_num}}次资料交互&nbsp;
				{{data.chatCount.days3.private_num.picture_num}}次图片交互
			</view>
			<!-- <view>
				分组交互：第{{data.chatCount.days3.group_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days3.group_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days3.group_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days3.group_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days3.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days3.now_count}}次
		</view>
		<text class="day"> 4Day</text>
		<view class="interact" space v-if="data.chatCount.days4">
			<!-- <view>
				公开交互：第{{data.chatCount.days4.public_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days4.public_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days4.public_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days4.public_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days4.public_num.picture_num}}次图片交互
			</view> -->
			<view>
				私人交互：{{data.chatCount.days4.private_num.voice_num}}次语音交互&nbsp;
				{{data.chatCount.days4.private_num.video_num}}次视频交互&nbsp;
				{{data.chatCount.days4.private_num.text_num}}次文字交互&nbsp;
				{{data.chatCount.days4.private_num.group_num}}次资料交互&nbsp;
				{{data.chatCount.days4.private_num.picture_num}}次图片交互
			</view>
			<!-- <view>
				分组交互：第{{data.chatCount.days4.group_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days4.group_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days4.group_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days4.group_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days4.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days4.now_count}}次
		</view>
		<text class="day"> 5Day</text>
		<view class="interact" space v-if="data.chatCount.days5">
			<!-- <view>
				公开交互：第{{data.chatCount.days5.public_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days5.public_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days5.public_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days5.public_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days5.public_num.picture_num}}次图片交互
			</view> -->
			<view>
				私人交互：{{data.chatCount.days5.private_num.voice_num}}次语音交互&nbsp;
				{{data.chatCount.days5.private_num.video_num}}次视频交互&nbsp;
				{{data.chatCount.days5.private_num.text_num}}次文字交互&nbsp;
				{{data.chatCount.days5.private_num.group_num}}次资料交互&nbsp;
				{{data.chatCount.days5.private_num.picture_num}}次图片交互
			</view>
			<!-- <view>
				分组交互：第{{data.chatCount.days5.group_num.voice_num}}次语音交互&nbsp;
				第{{data.chatCount.days5.group_num.video_num}}次视频交互&nbsp;
				第{{data.chatCount.days5.group_num.text_num}}次文字交互&nbsp;
				第{{data.chatCount.days5.group_num.group_num}}次资料交互&nbsp;
				第{{data.chatCount.days5.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days5.now_count}}次
		</view>
		<text class="day"> 6Day</text>
		<view class="interact" space v-if="data.chatCount.days6">
			<!-- <view>
				公开交互：第{{data.chatCount.days6.public_num.voice_num}}次语音交互&nbsp;&nbsp;
				第{{data.chatCount.days6.public_num.video_num}}次视频交互&nbsp;&nbsp;
				第{{data.chatCount.days6.public_num.text_num}}次文字交互&nbsp;&nbsp;
				第{{data.chatCount.days6.public_num.group_num}}次资料交互&nbsp;&nbsp;
				第{{data.chatCount.days6.public_num.picture_num}}次图片交互
			</view> -->
			<view>
				私人交互：{{data.chatCount.days6.private_num.voice_num}}次语音交互&nbsp;&nbsp;
				{{data.chatCount.days6.private_num.video_num}}次视频交互&nbsp;&nbsp;
				{{data.chatCount.days6.private_num.text_num}}次文字交互&nbsp;&nbsp;
				{{data.chatCount.days6.private_num.group_num}}次资料交互&nbsp;&nbsp;
				{{data.chatCount.days6.private_num.picture_num}}次图片交互
			</view>
			<!-- <view>
				分组交互：第{{data.chatCount.days6.group_num.voice_num}}次语音交互&nbsp;&nbsp;
				第{{data.chatCount.days6.group_num.video_num}}次视频交互&nbsp;&nbsp;
				第{{data.chatCount.days6.group_num.text_num}}次文字交互&nbsp;&nbsp;
				第{{data.chatCount.days6.group_num.group_num}}次资料交互&nbsp;&nbsp;
				第{{data.chatCount.days6.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days6.now_count}}次
		</view>
		<text class="day"> 7Day</text>
		<view class="interact" space v-if="data.chatCount.days7">
			<!-- <view>
				公开交互：第{{data.chatCount.days7.public_num.voice_num}}次语音交互&nbsp;&nbsp;
				第{{data.chatCount.days7.public_num.video_num}}次视频交互&nbsp;&nbsp;
				第{{data.chatCount.days7.public_num.text_num}}次文字交互&nbsp;&nbsp;
				第{{data.chatCount.days7.public_num.group_num}}次资料交互&nbsp;&nbsp;
				第{{data.chatCount.days7.public_num.picture_num}}次图片交互
			</view> -->
			<view>
				私人交互：{{data.chatCount.days7.private_num.voice_num}}次语音交互&nbsp;&nbsp;
				{{data.chatCount.days7.private_num.video_num}}次视频交互&nbsp;&nbsp;
				{{data.chatCount.days7.private_num.text_num}}次文字交互&nbsp;&nbsp;
				{{data.chatCount.days7.private_num.group_num}}次资料交互&nbsp;&nbsp;
				{{data.chatCount.days7.private_num.picture_num}}次图片交互
			</view>
			<!-- <view>
				分组交互：第{{data.chatCount.days7.group_num.voice_num}}次语音交互&nbsp;&nbsp;
				第{{data.chatCount.days7.group_num.video_num}}次视频交互&nbsp;&nbsp;
				第{{data.chatCount.days7.group_num.text_num}}次文字交互&nbsp;&nbsp;
				第{{data.chatCount.days7.group_num.group_num}}次资料交互&nbsp;&nbsp;
				第{{data.chatCount.days7.group_num.picture_num}}次图片交互
			</view> -->
			本日{{data.userinfo.realname}}{{getSex()}}定制总计交互次数：{{data.chatCount.days7.now_count}}次
		</view>
	</scroll-view>
	<!-- 统计数据 -->
	<text class="day count">
		截止到目前{{data.userinfo.realname}}{{getSex()}}整体定制的交互次数为：{{data.chatCount.count_num}}次
	</text>

	<view style="padding-top:20rpx; display:flex;justify-content:center;align-items: center;">
		<view class="btn" @click="onClick">
			<image class="icon" src="/static/icon/smile.png" mode="scaleToFill" />
			<!-- <image class="back" src="/static/icon/arrowhead.png" mode="aspectFit" /> -->
			<uni-icons type="up" size="24"></uni-icons>
			<text>收起</text>
		</view>

	</view>
</template>

<style lang="scss" scoped>
	.title {
		display: block;
		padding: 40rpx 0 40rpx 30rpx;
		color: rgb(0, 0, 0);
		font-size: 22rpx;
		font-weight: 600;
		line-height: 24rpx;
		text-align: left;
	}

	.day {
		display: block;
		padding: 0 20rpx 10rpx 30rpx;
		color: rgb(0, 0, 0);
		font-size: 22rpx;
		font-weight: 600;
		line-height: 24rpx;
		text-align: left;
	}

	.count {
		padding-top: 20rpx;
	}

	.interact {
		display: block;
		padding: 0 20rpx 36rpx 30rpx;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 24rpx;
		text-align: left;
	}

	// 68px  16px  92px
	.main {
		overflow-y: scroll;
		height: fit-content;
		max-height: calc(100% - 352rpx - 30rpx);
	}

	.btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: fit-content;

		// position: absolute;
		// bottom: 90rpx;
		// left: 50%;
		// transform: translateX(-50%);

		.icon {
			width: 30rpx;
			height: 30rpx;
		}

		.back {
			margin: 10rpx 0 16rpx;
			width: 22rpx;
			height: 22rpx;
		}

		>text {
			color: rgb(0, 0, 0);
			font-size: 22rpx;
			font-weight: 600;
			line-height: 24rpx;
			text-align: left;
		}
	}
	
	.exit{
		padding-right: 50rpx;
		font-size: 20rpx;
		color: #c00003;
	}
</style>